<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>KoodoBlog</title>

    <script src="js/jquery-3.4.1.min.js" type="application/javascript"></script>
    <script src="js/bootstrap.min.js" type="application/javascript"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/myblog.css">
    <link rel="stylesheet" href="css/blog.css">

</head>

<body>
<!-- Fixed navbar -->
<div th:replace="topbar :: top-bar"></div>

<div class="jumbotron jumbotron-expend">
    <div class="container">
        <h1>欢迎来到KoodoBlog!</h1>
        <p>Koodo = コード = code,也就是代码.会这里分享一些自己的经验,希望通过交流相互提升.</p>
    </div>
</div>

<div class="container" role="main">
    <div class="row">

        <div class="col-sm-8 blog-main">

            <div class="blog-post" th:each="blog:${pagination.data}">
                <div>
                    <h2 class="blog-post-title">
                        [[${blog.title}]]
                        <span class="label label-primary index-lable" th:if="${blog.type == 0}">原创</span>
                        <span class="label label-success index-lable" th:if="${blog.type == 1}">转载</span>
                    </h2>
                </div>

                <p class="blog-post-meta"
                   th:text="${#calendars.format(blog.gmtCreate,'yyyy-MM-dd HH:mm')} + ' by ' + ${blog.user.username}"></p>

                <p th:text="${blog.content}">This blog post shows a few different types of content that's supported and
                    styled with Bootstrap.
                    Basic typography, images, and code are all supported.</p>
                <hr>

            </div><!-- /.blog-post -->


            <nav>
                <ul class="pager">
                    <li class="pull-left" th:if="${pagination.showPrevious}">
                        <a href="#" th:href="@{/(page=${pagination.page}-1)}">Previous</a>
                    </li>
                    <li class="pull-right" th:if="${pagination.showNext}">
                        <a href="#" th:href="@{/(page=${pagination.page}+1)}">Next</a>
                    </li>
                </ul>
            </nav>

        </div><!-- /.blog-main -->

        <div class="col-sm-3 col-sm-offset-1 blog-sidebar">
            <div class="sidebar-module sidebar-module-inset">
                <h4>About</h4>
                <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet
                    fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
            </div>
            <div class="sidebar-module">
                <h4>Archives</h4>
                <ol class="list-unstyled">
                    <li><a href="#">March 2014</a></li>
                    <li><a href="#">February 2014</a></li>
                    <li><a href="#">January 2014</a></li>
                    <li><a href="#">December 2013</a></li>
                    <li><a href="#">November 2013</a></li>
                    <li><a href="#">October 2013</a></li>
                    <li><a href="#">September 2013</a></li>
                    <li><a href="#">August 2013</a></li>
                    <li><a href="#">July 2013</a></li>
                    <li><a href="#">June 2013</a></li>
                    <li><a href="#">May 2013</a></li>
                    <li><a href="#">April 2013</a></li>
                </ol>
            </div>
            <div class="sidebar-module">
                <h4>Elsewhere</h4>
                <ol class="list-unstyled">
                    <li><a href="#">GitHub</a></li>
                    <li><a href="#">Twitter</a></li>
                    <li><a href="#">Facebook</a></li>
                </ol>
            </div>
        </div><!-- /.blog-sidebar -->

    </div>


</div> <!-- /container -->


<footer class="blog-footer">
    <p>Blog template built for <a href="http://getbootstrap.com">Bootstrap</a> by <a
            href="https://twitter.com/mdo">@mdo</a>.</p>
    <p>
        <a href="#">Back to top</a>
    </p>
</footer>

</body>
</html>
